<!--
/**
* Author: gqz
* Date: 2021-08-26 16:21
* Desc: ZmPopup
* https://www.uviewui.com/components/popup.html
*/
-->
<template>
  <view :class="customClass">
    <u-popup
      :show="visible"
      :mode="mode"
      :mask="mask"
      :safe-area-inset-bottom="safeBottom"
      :close-on-click-overlay="maskCloseAble"
      :custom-style="customStyle"
      :z-index="zIndex"
      :round="round"
      :closeable="closeable"
      :overlay-style="overlayStyle"
      :width="width"
      :height="height"
      :bg-color="bgColor"
      @open="open"
      @close="close"
    >
      <slot></slot>
    </u-popup>
  </view>
</template>

<script>
  import styleMixins from '@/mixins/styleMixins'

  export default {
    name: 'ZmPopup',
    mixins: [styleMixins],
    props: {
      value: { type: Boolean },
      // 'left' | 'right' | 'bottom' | 'center' | 'top'
      mode: {
        type: String,
        default: 'bottom'
      },
      //否显示遮罩
      mask: {
        type: Boolean,
        default: true
      },
      //是否开启缩放动画，只在mode为center时有效
      zoom: {
        type: Boolean,
        default: true
      },
      safeAreaInsetBottom: {
        type: Boolean,
        default: true
      },
      //点击遮罩是否可以关闭弹出层
      maskCloseAble: {
        type: Boolean,
        default: true
      },
      zIndex: {
        type: [String, Number],
        default: '10075'
      },
      closeable: {
        type: Boolean,
        default: true
      },
      round: {
        type: [String, Number],
        default: 0
      },
      width: {
        type: [String, Number]
      },
      height: {
        type: [String, Number]
      },
      bgColor: {
        type: [String, Number]
      },
      overlayStyle: {
        type: [Object, String]
      }
    },
    data() {
      return {}
    },
    computed: {
      visible: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      },
      safeBottom() {
        if (this.mode === 'top') {
          return false
        }
        return this.safeAreaInsetBottom
      }
    },
    methods: {
      open(e) {
        this.$emit('open', e)
      },
      close() {
        this.$emit('close')
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped></style>
